<template>
  <div>
    <div class="col-lg-3 col-md-6" v-for="(file,index) in transport_data" :key="index">
      <div class="card-box widget-user">
        <!-- <div class="dropup pull-right" :class="(transport_data.length / 4 ) - (index / 4 ) <= 2 ? 'dropup': ''"> -->
        <div class="dropup pull-right">
          <a
            href="#"
            class="dropdown-toggle card-drop"
            data-toggle="dropdown"
            aria-expanded="false"
          >
            <i class="zmdi zmdi-more-vert"></i>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a @click.prevent="share_file_id = file.id; share_file_name = file.filename">共享</a>
            </li>
            <li>
              <a href="#">评论</a>
            </li>
            <li>
              <a href="#">收藏</a>
            </li>
            <li>
              <a href="#">详细信息</a>
            </li>
            <li>
              <a href="#">重命名</a>
            </li>
            <li>
              <a href="#">移动或复制</a>
            </li>
            <li>
              <a :href="$api + '/download/' + file.md5  + '/'">下载</a>
            </li>
            <li>
              <a href="#">删除</a>
            </li>
          </ul>
        </div>

        <!-- img-type -->
        <img
          v-if="file.mimetype == 'application/pdf' "
          src="/static/assets/svg/application-pdf.svg"
          class="img-responsive img-circle"
          alt="user"
        >

        <img
          v-if="file.mimetype == 'application/octet-stream'"
          src="/static/assets/svg/application.svg"
          class="img-responsive img-circle"
          alt="user"
        >

        <img
          v-if="file.mimetype == 'image/jpeg'|| file.mimetype == 'image/png'"
          :src="$api + '/image/' + file.md5 + '/'"
          class="img-responsive img-thumbnail"
          alt="user"
        >
        <!-- img-type -->
        <div class="wid-u-info">
          <h4 class="m-t-0 m-b-5 font-600">{{ file.filename }}</h4>
          <p class="text-muted m-b-5 font-13" v-html="bytes_to_human(file.size)"></p>
          <small class="text-warning">
            <b>{{ file.filename.split('.')[file.filename.split('.').length-1] }}</b>
          </small>
        </div>
      </div>
    </div>
    <div
      v-show="share_file_id"
      class="modal fade none-border in"
      id="add-category"
      style="display: block; padding-right: 17px;"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
              @click="share_file_id = 0"
            >×</button>
            <h4 class="modal-title">
              <strong>分享文件：{{ share_file_name }}</strong>
            </h4>
          </div>

          <div class="modal-body">
            <form role="form">
              <div class="row">
                <div class="col-md-12">
                  <p class="text-muted font-13 m-b-15 m-t-20">寻找一位朋友分享给他</p>
                  <div class="input-group">
                    <span class="input-group-btn">
                      <button type="button" class="btn waves-effect waves-light btn-primary">
                        <i class="fa fa-search"></i>
                      </button>
                    </span>
                    <input
                      type="text"
                      id="example-input1-group2"
                      name="example-input1-group2"
                      class="form-control"
                      placeholder="如果你没有朋友，那么代表您将公开分享这个文件"
                    >
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <p class="text-muted font-13 m-b-15 m-t-20">分享时效性</p>
                  <div class="input-group">
                    <div class="radio radio-info radio-inline">
                      <input
                        type="radio"
                        id="inlineRadio1"
                        value="long"
                        v-model="share_expire_time"
                      >
                      <label for="inlineRadio1">很久很久</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                      <input type="radio" id="inlineRadio2" value="7" v-model="share_expire_time">
                      <label for="inlineRadio2">七天</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                      <input type="radio" id="inlineRadio3" value="1" v-model="share_expire_time">
                      <label for="inlineRadio3">一天</label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <label class="text-muted font-13 m-b-15 m-t-20">
                    是否要设置分享密码呢? &nbsp;
                    <input
                      type="checkbox"
                      v-model="need_share_password"
                      data-plugin="switchery"
                      data-color="#00b19d"
                      data-size="small"
                    >
                  </label>
                  <input
                    v-show="need_share_password"
                    v-model="share_password"
                    type="text"
                    class="form-control"
                    placeholder="设置你的分享密码"
                  >
                </div>
              </div>
            </form>
          </div>

          <div class="row">
            <div class="col-md-12">
              <button
                type="button"
                class="btn btn-success btn-trans waves-effect w-md waves-success m-b-5"
                @click="share_file"
              >生成分享连接</button>
              <input type="text" class="form-control" readonly value="Readonly value">
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default waves-effect"
              data-dismiss="modal"
              @click="share_file_id=0"
            >Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
</style>


<script>
export default {
  data() {
    return {
      share_expire_time: "long",
      share_file_id: 0,
      share_file_name: "",
      need_share_password: 0, // 是否需要分享密码

      share_password: "" // 分享密码
    };
  },
  props: ["transport_data"],
  methods: {
    share_file() {
      // 请求后端接口，生成实际连接
      let form_data = new FormData()
      form_data.append('share_file', this.share_file_id)
      form_data.append('share_time', this.share_expire_time)
      form_data.append('share_pass', this.share_password)

      axios({
        // 将请求发给后台接口 生成分享连接
      })
    },
    bytes_to_human(value) {
      let sig = {
        GB: 1024 * 1024 * 1024,
        MB: 1024 * 1024,
        KB: 1024
      };
      for (let key in sig) {
        if (parseInt(value) > sig[key]) {
          return (parseInt(value) / sig[key]).toFixed(2) + key;
        }
      }
      return value + "bytes";
    }
  },
  watch: {
    transport_data(n, o) {
      console.log(n);
    }
  }
};
</script>